<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>人员列表</h2>
    <!--v-for 用于展示数据的指令 能够具有循环的效果-->
    <ul>
        <li v-for="(p,index) in persons" :key="index">
          {{index}}  {{p.id}}-{{p.name}}-{{p.age}}
        </li>
    </ul>

    <div v-for="(c,k) of car" :key="c">
        {{c}}-{{k}}
    </div>

    <div v-for="(s,i) of str" :key="i">
        {{s}}-{{i}}
    </div>

    <span v-for="j in 100">
       <a href="#" v-if="j % 2 == 0"> {{j}}</a>
    </span>

</div>

</body>
</html>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //数组
                //属性名:属性值
                persons:[
                    {id:'001',name:'张三',age:5},
                    {id:'002',name:'王五',age:15},
                    {id:'003',name:'赵六',age:5}
                ],
                //js对象
                car:{
                    name:'宝马',
                    price:'70w',
                    color:'黑色'
                },
                //字符串
                str:'helloworld'
            }
        },

    });
</script>